{% extends "navigationbar.html" %}
{% load static %}

{% block title %}心语WIT - 个人主页{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/homepage.css' %}">
    <style>
        /* 整体背景色 */
        body {
            background: #fff0f6;
            padding: 20px;
        }

        /* 容器样式 */
        .container {
            max-width: 1200px;
            background: linear-gradient(135deg, #ffe4e6 0%, #fff1f2 100%);
            border-radius: 20px;
            padding: 30px 40px 40px;
            box-shadow: 0 4px 20px rgba(252, 165, 165, 0.2);
            margin-bottom: 40px;
        }

        /* 随机鼓励语卡片样式 */
       .motivation-card {
            background: linear-gradient(135deg, #ffccd5 0%, #ffb6c1 100%);
            border-radius: 15px;
            padding: 20px 30px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 15px;
            animation: breathe 6s ease-in-out infinite;
            border: 1px solid #f472b6;
        }

        @keyframes breathe {
            0%, 100% {
                transform: scale(0.98);
                opacity: 0.95;
            }
            50% {
                transform: scale(1);
                opacity: 1;
            }
        }

       .motivation-icon {
            width: 40px;
            height: 40px;
            filter: drop-shadow(0 2px 4px rgba(244, 114, 182, 0.3));
        }

       .motivation-text {
            color: #9d174d;
            font-size: 18px;
            line-height: 1.6;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        /* 用户信息部分样式 */
       .profile-section {
            display: flex;
            align-items: center;
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 1px solid #fda4af;
        }

       .avatar {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            margin-right: 25px;
            border: 4px solid #f472b6;
            box-shadow: 0 4px 15px rgba(244, 114, 182, 0.3);
        }

       .user-info {
            flex-grow: 1;
        }

       .username {
            font-size: 28px;
            color: #831843;
            margin-bottom: 8px;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

       .join-date {
            color: #be185d;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

       .join-date::before {
            content: '📅';
            font-size: 16px;
        }

        /* 图表容器样式 */
       .chart-container {
            margin-top: 35px;
            position: relative;
            height: 450px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 25px;
            border: 1px solid #fbcfe8;
        }

       .chart-title {
            text-align: center;
            color: #9d174d;
            margin-bottom: 25px;
            font-size: 22px;
            font-weight: 500;
            letter-spacing: 1px;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="container">
        <!-- 随机鼓励语区块 -->
        <div class="motivation-card">
            <img src="{% static 'img/sun.png' %}"
                 alt="阳光图标"
                 class="motivation-icon">
            <p class="motivation-text" id="encouragementText">
                <!-- 此处内容将由JavaScript动态生成 -->
            </p>
        </div>

        <!-- 用户信息区块 -->
        <div class="profile-section">
            <img src="{% static 'img/userAvatar_default.png' %}"
                 alt="用户头像"
                 class="avatar">
            <div class="user-info">
                <h1 class="username">{{ username }}</h1>
                <p class="join-date">注册时间：{{ registrationDate }}</p>
            </div>
        </div>

        <!-- 图表容器 -->
        <div class="chart-container">
            <h2 class="chart-title">心理健康指数趋势图</h2>
            <canvas id="moodChart" width="800" height="400"></canvas>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'js/chart.umd.js' %}"></script>
    <script>
        // 随机鼓励语句库
        const motivations = [
            {
                text: "你的心理韧性比上周提升了%%percent%%% 🌱 每一次坚持都在塑造更好的自己！",
                icon: '🌱',
                requireData: true
            },
            {
                text: "本周有%%days%%天指数超过80分 🌟 继续保持这种积极状态吧！",
                icon: '🌟',
                requireData: true
            },
            {
                text: "最近3天指数稳定上升 📈 说明你的自我调节正在生效！",
                icon: '📈'
            }
        ];
        // 图表数据
        const chartData = {
            labels: {{ chart_labels | safe }},
            datasets: [{
                label: '心理状态',
                data: {{ chart_data | safe }},
                borderColor: '#f472b6',
                backgroundColor: 'rgba(244, 114, 182, 0.1)',
                tension: 0.3,
                fill: true,
                pointRadius: 6,
                pointBackgroundColor: '#f472b6',
                pointBorderColor: '#ffffff',
                pointHoverRadius: 8,
                borderWidth: 2
            }]
        };

        // 图表配置
        const config = {
            type: 'line',
            data: chartData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        min: 0,
                        max: 100,
                        grid: {color: '#fbcfe8'},
                        title: {
                            display: true,
                            text: '健康指数',
                            color: '#be185d'
                        },
                        ticks: {color: '#db2777'}
                    },
                    x: {
                        grid: {display: false},
                        ticks: {color: '#db2777'}
                    }
                },
                plugins: {
                    legend: {
                        labels: {color: '#9d174d'},
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: '#ffffff',
                        titleColor: '#831843',
                        bodyColor: '#9d174d',
                        borderColor: '#fbcfe8',
                        borderWidth: 1,
                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                        callbacks: {
                            label: function (context) {
                                const value = context.parsed.y || context.dataset.data[context.dataIndex];
                                if (value === 0 || value === null) {
                                    return '您当日未测试';
                                }
                                return `健康指数: ${value.toFixed(1)}`;
                            }
                        }
                    }
                }
            }
        };

        // 页面加载初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 随机选择鼓励语
            const randomMotivation = motivations[Math.floor(Math.random() * motivations.length)];
            const encouragementText = document.getElementById('encouragementText');

            // 动态数据计算
            const data = chartData.datasets[0].data;
            const dataStats = {
                percent: ((data[data.length - 1] - data[0]) / data[0] * 100).toFixed(0),
                days: data.filter(score => score >= 80).length
            };

            // 替换模板变量
            let finalText = randomMotivation.text
               .replace('%%percent%%', Math.abs(dataStats.percent))
               .replace('%%days%%', dataStats.days);

            encouragementText.innerHTML = `${finalText} ${randomMotivation.icon}`;

            // 初始化图表
            const ctx = document.getElementById('moodChart').getContext('2d');
            new Chart(ctx, config);
        });
    </script>
{% endblock %}